<template>
	<el-card shadow="hover" header="数据统计_charts2" v-loading="loading">
		<scEcharts ref="c1" height="300px" :option="option"></scEcharts>
	</el-card>
</template>

<script>
import scEcharts from '@/components/scEcharts';

export default {
	title: "数据统计_charts2",
	icon: "el-icon-user",
	description: "数据统计",
	components: {
		scEcharts
	},
	data() {
		return {
			loading: true,
			option: {},
		}
	},
	created() {
		this.initData()
	},
	mounted() {

	},

	methods: {

		/**
		 * 初始化数据
		 */
		async initData() {
			this.loading = true
			var option = {
				title: {
					text: 'Pie Demo',
					subtext: '基础饼图',
				},
				tooltip: {
					trigger: 'item'
				},
				series: [
					{
						name: '访问来源',
						type: 'pie',
						radius: ['40%', '70%'],
						center: ['50%', '60%'],
						label: false,
						data: [
							{value: 1048, name: '搜索引擎'},
							{value: 735, name: '直接访问'},
							{value: 580, name: '邮件营销'},
							{value: 484, name: '联盟广告'},
							{value: 300, name: '视频广告'}
						]
					}
				]
			};
			this.option = option;
			this.loading = false
		}
	}
}
</script>
